<template>
    <div class="home">
        <el-row>
            <el-col :span="24">
                <div class="statistic">
                    <el-card shadow="hover">
                        <p class="icon"><i class="el-icon-camera-solid"></i></p>
                        <p class="num">{{ statistics.plan_count }}</p>
                        <p class="desc">拍摄总数</p>
                    </el-card>
                    <el-card shadow="hover">
                        <p class="icon"><i class="el-icon-user-solid"></i></p>
                        <p class="num">{{ statistics.user_count }}</p>
                        <p class="desc">用户总数</p>
                    </el-card>
                    <el-card shadow="hover">
                        <p class="icon"><i class="el-icon-video-camera-solid"></i></p>
                        <p class="num">{{ statistics.photo_count }}</p>
                        <p class="desc">拍摄原图数</p>
                    </el-card>
                    <el-card shadow="hover">
                        <p class="icon"><i class="el-icon-picture"></i></p>
                        <p class="num">{{ statistics.retouch_count }}</p>
                        <p class="desc">精修图数</p>
                    </el-card>
                </div>
            </el-col>
        </el-row>

        <el-row class="user-me">
            <el-col :span="8" style="padding-right: 10px;">
                <el-card class="box-card" shadow="hover" header="我的信息">
                    <div class="user">
                        <img :src="avatar" alt="">
                        <div class="user-info">
                            <p class="name">{{ user.name }}</p>
                            <p class="role">{{ user.role.description }}</p>
                        </div>
                    </div>
                    <div class="login-info">
                        <p>上次登录时间：<span>{{ login.date }}</span></p>
                        <p>上次登录地点：<span>{{ login.address }}</span></p>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16" style="padding-left: 10px;">
                <div class="graph">
                    <el-card shadow="hover" header="用户分布">
                        <div ref="echarts2" style="height: 260px;"></div>
                    </el-card>
                    <el-card shadow="hover" header="拍摄分布">
                        <div ref="echarts3" style="height: 220px;"></div>
                    </el-card>
                </div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <div class="logs">
                    <el-card shadow="hover" header="最近登录日志">
                        <el-table :data="logs">
                            <el-table-column prop="user.name" label="用户名"></el-table-column>
                            <el-table-column prop="ip" label="IP地址"></el-table-column>
                            <el-table-column prop="address" label="登录地"></el-table-column>
                            <el-table-column label="操作系统">
                                <template slot-scope="scope">
                                    {{ scope.row.os.trim().length ? scope.row.os : '未知' }}
                                </template>
                            </el-table-column>
                            <el-table-column label="状态">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.row.status === 1" size="mini" type="success" effect="dark">正常</el-tag>
                                    <el-tag v-else size="mini" type="danger" effect="dark">失败</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="msg" label="操作信息" width="180"></el-table-column>
                            <el-table-column prop="created_at" label="日期" width="180"></el-table-column>
                        </el-table>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>

import { getData } from '../api/index'
import { getStatistic } from "@/api/home"

import * as echarts from 'echarts'
import { mapState } from 'vuex'
import Cookie from "js-cookie"

export default {
    mounted() {
        getData().then(({ data }) => {
            //const { tableData } = data.data
            //this.tableData = tableData

            const { userData } = data.data


            const echarts2 = echarts.init(this.$refs.echarts2)
            const echartsOption2 = {
                legend: {
                    // 图例文字颜色
                    textStyle: {
                        color: "#333",
                    },
                },
                grid: {
                    left: "20%",
                },
                // 提示框
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    type: "category", // 类目轴
                    data: userData.map(item => item.date),
                    axisLine: {
                        lineStyle: {
                            color: "#17b3a3",
                        },
                    },
                    axisLabel: {
                        interval: 0,
                        color: "#333",
                    },
                },
                yAxis: [
                    {
                        type: "value",
                        axisLine: {
                            lineStyle: {
                                color: "#17b3a3",
                            },
                        },
                    },
                ],
                color: ["#2ec7c9", "#b6a2de"],
                series: [
                    {
                        name: '新增用户',
                        data: userData.map(item => item.new),
                        type: 'bar'
                    },
                    {
                        name: '活跃用户',
                        data: userData.map(item => item.active),
                        type: 'bar'
                    }
                ]
            }
            echarts2.setOption(echartsOption2)

        })
    },
    data() {
        return {
            tableData: [],
            logs: [],
            login: {},
            statistics: {},
            videoData: []
        }
    },
    created() {
        this.getStatistic()
    },
    computed: {
        ...mapState({
            avatar: state => state.menu.avatar.length ? state.menu.avatar : Cookie.get('avatar'),
            user: state => state.menu.user.id !== undefined ? state.menu.user : JSON.parse(Cookie.get('user'))
        })
    },
    methods: {
        getStatistic() {
            getStatistic().then(({ data }) => {
                console.log(data)
                this.logs = data.data.logs
                this.login = data.data.login
                this.statistics = data.data.statistics
                this.videoData = data.data.data
                this.render()
            })
        },
        render() {
            const echarts3 = echarts.init(this.$refs.echarts3)
            const echartsOption3 = {
                tooltip: {
                    trigger: "item",
                },
                color: [
                    "#0f78f4",
                    "#dd536b",
                    "#9462e5",
                    "#a6a6a6",
                    "#e1bb22",
                    "#39c362",
                    "#3ed1cf",
                ],
                series: [
                    {
                        data: this.videoData,
                        type: 'pie'
                    }
                ]
            }
            echarts3.setOption(echartsOption3)
        }
    }
}
</script>

<style lang="less" scoped>
.home {
    .statistic {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;

        .el-card {
            width: 280px;

            p {
                text-align: center;

                i {
                    font-size: 30px;
                    line-height: 30px;
                    color: #333333;
                }
            }

            p.num {
                font-size: 14px;
                margin: 5px 0;
            }

            p.desc {
                color: #666666;
                font-size: 12px;
            }
        }
    }

    .user {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 1px solid #efefef;

        img {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            margin-right: 40px;
        }

        .user-info {
            .name {
                font-size: 18px;
                margin-bottom: 10px;
                font-weight: normal;
            }

            .role {
                color: #666;
            }
        }
    }

    .login-info {
        margin-top: 12px;

        p {
            line-height: 28px;
            color: #999;
            font-size: 14px;

            span {
                color: #666;
                margin-left: 60px;
            }
        }
    }

    .graph {
        display: flex;
        justify-content: space-between;
        padding-bottom: 8px;

        .el-card {
            height: 308px;
            width: 48%;
        }
    }

    .user-me {
        /deep/.el-card {
            .el-card__body {
                padding: 20px;
            }
            .el-card__header {
                padding: 15px 10px;
                font-size: 13px;
            }
        }
    }

    .logs {
        margin-top: 13px;

        /deep/.el-card {
            .el-card__body {
                padding: 0;
            }
            .el-card__header {
                padding: 15px 10px;
                font-size: 13px;
            }
            .cell {
                font-weight: normal;
                color: #666666;
                font-size: 13px;
            }
        }
    }
}
</style>
